<template>
 <!--  -->
    <div class="channel">
       <van-tabs v-model="active" class="van-tabs__content">
             <van-tab v-for="(v,k) in categoryList" :key="v.id" :title="v.name">
                  <h2 >{{v.name}}</h2>
                 <p>{{v.front_desc}}</p>
             </van-tab>
             <div class="title_desc">
                 <van-grid :border="false" :column-num="2" >
                     <van-grid-item v-for="v in data" :key="v.id" @click="onClick(v.id)">
                       <van-image :src="v.list_pic_url" />
                       <div class="desc">{{v.name}}</div>
                       <div class="price">￥ {{v.retail_price}}.00 元</div>
                    </van-grid-item>
                </van-grid>
             </div>
        </van-tabs>
    </div>
</template>

<script>
import {GetSearchTiplist,GetType} from '@/request/api.js'
export default {
     data(){
         return{
             active:'',
             id:'',
             categoryList:'',
             brotherCategory:'',
             listid:[],
             data:'',
             page:1,
             size:200,
         }
     },
   methods:{
        onClick(id){
            this.$router.push({
                path:'details',
                query:{
                     id:id
                }
            })
        }
   },
  //监听获取标签相应的数据    
   watch:{
       'active':function(newval){
            GetSearchTiplist({categoryId:this.listid[newval],page:this.page,size:this.size}).then(res=>{
                //  console.log(res);
                 this.data=res.data.data

            })
       }
   },
  //获取地址栏id    
    created(){
         this.id=this.$route.query.id;
         GetType({id:this.id}).then(res=>{
            //   console.log(res);
              this.categoryList=res.data.categoryList
              this.categoryList.forEach(item=>{
                   this.listid.push(item.id)
              })
              console.log(this.listid);
         })
    }

}
</script>

<style lang="less">
.channel{
    width: 100%;
    height: 100%;
    z-index: 2;
}
.van-tabs__content{
    margin-bottom: 50px;
}
.van-tabs__content h2{
    font-size: 18px;
    height: 50px;
    text-align: center;
    line-height: 50px;
}
.van-tabs__content p{
    height: 30px;
    line-height: 30px;
    color: #666;
    text-align: center;
    font-size: 10px;
}
.title_desc .desc{
     font-size:.80rem;
     font-family: '宋体';
  }
.title_desc .price{
     margin-top: .50rem;
     font-size:.85rem;
     font-family: '宋体';
     color:#8B004A ;
  }
  
</style>